<template>
    <div>
      <el-card class="box-card main-table-card">
        <div slot="header" class="clearfix">
          <el-form ref="queryForm" :model="query" label-width="80px">
            <el-input style="width: 120px;" placeholder="请输入用户名" v-model="query.userName"></el-input>
            <el-input style="width: 120px;" placeholder="请输入昵称" v-model="query.nickName"></el-input>
            <el-input style="width: 120px;" placeholder="请输入手机号" v-model="query.mobile"></el-input>
            <el-input style="width: 120px;" placeholder="请输入邮箱" v-model="query.email"></el-input>
            <el-button type="primary" @click="page(1)">搜索</el-button>

            <el-button type="primary" v-if="button.type == 'BUTTON_TOP'"  v-for="button in $store.state.buttons" :key="button.id" @click="handleClick('',button.name)">{{button.title}}</el-button>
          </el-form>
        </div>
        <el-table v-loading="loading" size="mini" :data="tableData.data" border style="width: 100%" height="400">
          <el-table-column type="index" width="50" label="序列" align="center" fixed show-overflow-tooltip></el-table-column>
          <el-table-column prop="userName" label="用户名" width="100" align="center"></el-table-column>
          <el-table-column prop="name" label="姓名" width="100" align="center"></el-table-column>
          <el-table-column prop="nickName" label="昵称" width="100" align="center"></el-table-column>
          <el-table-column prop="sex" label="性别" :formatter="formatterSex" width="50" align="center"></el-table-column>
          <el-table-column prop="mobile" label="手机号" width="150" show-overflow-tooltip align="center"></el-table-column>
          <el-table-column prop="email" label="邮箱" show-overflow-tooltip align="center"></el-table-column>
          <el-table-column prop="startUsing" label="是否启用" :formatter="formatterStartUsing" align="center"></el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row,button.name)" v-if="button.type == 'BUTTON_LIST'" v-for="button in $store.state.buttons" :key="button.id" type="text" size="small">{{button.title}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="tableData.current"
          :page-sizes="[10, 50, 100, 200]"
          :page-size="query.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total">
        </el-pagination>
      </el-card>
      <admin-user-add v-bind:showAdd.sync="showAdd" @saveCallback="page(1)" :roles="roles"></admin-user-add>
    </div>
</template>

<script>
import axios from '@/common/js/axios'
import adminUserAdd from './Add'
import global from '@/common/components/Global'
export default {
  name: '',
  components:{
    adminUserAdd
  },
  data() {
    return {
      showAdd:false,
      loading:false,
      roles:[],
      buttons:this.$store.state.buttons,
      query: {
        userName:null,
        nickName:null,
        mobile:null,
        email:null,
        current:1,
        size:10
      },
      tableData: {}
    }
  },
  created(){
    this.page();
  },
  methods: {
    //===================================分页使用====================================
    /**
     * 改变每页显示条数时执行
     * */
    handleSizeChange(val) {
      this.query.size = val;
      this.page(1);
    },
    /**
     * 分页插件切换页面时执行
     * */
    handleCurrentChange(val) {
      this.page(val);
    },
    //====================================增删改查===================================
    /**
     * 列表功能按钮
     * */
    handleClick(row,methodName) {
      let _this = this;
      switch (methodName) {
        case 'add': {
          _this.add();
          break;
        }
        case 'edit': {
          _this.$message.warning("编辑")
        }
      }

    },
    /**
     * 分页查询数据
     * */
    page(current){
      let _this = this;
      _this.loading = true;
      _this.query.current = current
      axios.post(global.adminBackEndApi + 'sys/admin-user/page',_this.query).then(response => {
        if (response.data.result) {
          _this.tableData = response.data
        } else {
          _this.$message(response.data.msg)
        }
        _this.loading = false
        console.log(response)
      })
    },
    /**
     * 打开添加弹出框
     * */
    add(){
      let _this = this;
      axios.post(global.adminBackEndApi + 'sys/admin-role/list').then(response => {
        if (response.data.result){
          _this.roles = response.data.data
          _this.showAdd = true
        } else {
          _this.$message(response.data.msg)
        }
      })


    },
    //=========================数据过滤========================
    /**
     * 过滤数据展示
     * */
    formatterStartUsing: function(row, column) {
      return row.startUsing?"启用" : "未启用";
    },
    formatterSex(row,column){
      return row.sex == 'M'?'男':row.sex == 'F'?'女':'未知';
    }
  }

}
</script>

<style scoped>
  .main-table-card{
    min-height: 400px;
  }
  .search-form{
    margin-top: 0px;
    padding-top:0px;
  }

</style>
